<template>
  <div class="income-proof-container">
    <h2>收入证明申请</h2>
    <form @submit.prevent="submitApplication">
      <!-- 申请人姓名 -->
      <div class="form-group">
        <label for="userName">申请人姓名</label>
        <input type="text" id="userName" v-model="application.UserID" placeholder="请输入申请人姓名" required>
      </div>
      <!-- 申请日期 -->
      <div class="form-group">
        <label for="applicationDate">申请日期</label>
        <input type="date" id="applicationDate" v-model="application.ApplicationDate" required>
      </div>
      <!-- 部门 -->
      <div class="form-group">
        <label for="department">部门</label>
        <input type="text" id="department" v-model="application.Department" placeholder="请输入部门" required>
      </div>
      <!-- 职位 -->
      <div class="form-group">
        <label for="position">职位</label>
        <input type="text" id="position" v-model="application.Position" placeholder="请输入职位" required>
      </div>
      <!-- 申请原因 -->
      <div class="form-group">
        <label for="reason">申请原因</label>
        <textarea id="reason" v-model="application.Reason" placeholder="请输入申请原因" required></textarea>
      </div>
      <!-- 是否批准（这里做成只读的展示，实际中可能根据用户角色决定是否可编辑） -->
      <!--      <div class="form-group">-->
      <!--        <label for="approved">是否批准</label>-->
      <!--        <input type="text" id="approved" :value="application.Approved === 1? '是' : '否'" readonly>-->
      <!--      </div>-->
      <button type="submit" @click="dialogVisible = true">提交申请</button>

      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
        <span>申请提交成功</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>

    </form>
    <!-- 申请记录列表 -->
    <h2 @click="dialogVisibles = true">申请记录列表</h2>
    <el-dialog
        title="申请记录列表"
        :visible.sync="dialogVisibles"
        width="60%"
    >
      <el-table :data="applicationRecords" style="width: 100%">
        <el-table-column prop="proofID" label="收入证明ID">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.ProofID }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="UserID" label="申请人姓名">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.ProofID }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ApplicationDate" label="申请日期">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.ApplicationDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Department" label="部门">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.Department }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Position" label="职位">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.Position }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Reason" label="申请原因">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.Reason }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Approved" label="是否批准">
          <template slot-scope="scope">
            {{ scope.row.Approved === 1? "是" : "否" }}
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibles = false">取消</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dialogVisible:false,
      dialogVisibles:false,
      // 收入证明申请对象
      application: {
        UserID: '',
        ApplicationDate: '',
        Department: '',
        Position: '',
        Reason: '',
        Approved: 0
      },
      // 收入证明申请记录列表
      applicationRecords: []
    };
  },
  mounted() {
    // 页面加载时获取申请记录列表
    this.fetchApplicationRecords();
  },
  methods: {
    // 提交收入证明申请
    submitApplication() {
      axios.post('/api/income-proof-applications', this.application)
          .then(response => {
            if (response.data.success) {
              alert('申请提交成功');
              // 重新获取申请记录列表
              this.fetchApplicationRecords();
              // 清空表单
              this.application = {
                UserID: '',
                ApplicationDate: '',
                Department: '',
                Position: '',
                Reason: '',
                Approved: 0
              };
            } else {
              alert('申请提交失败，请稍后再试');
            }
          })
          .catch(error => {
            console.error(error);
            alert('网络错误，请检查网络连接');
          });
    },
    // 从后端获取收入证明申请记录列表
    fetchApplicationRecords() {
      axios.get('/api/income-proof-applications')
          .then(response => {
            this.applicationRecords = response.data;
          })
          .catch(error => {
            console.error(error);
            alert('网络错误，请检查网络连接');
          });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  }
};
</script>

<style scoped>


h2{
  color: #333; /* 字体颜色 */
  font-size: 24px; /* 字体大小 */
  background-color: #f5f5f5; /* 背景颜色 */
  padding: 10px; /* 内边距 */
  border-radius: 5px; /* 边框圆角 */
  cursor: pointer;  /* 鼠标悬停样式 */
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); /* 文本阴影 */
  transition: background-color 0.3s ease; /* 过渡效果 */
}

h2:active {
  background-color: #e0e0e0; /* 点击时的背景颜色 */
}

.income-proof-container {
  width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input,
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

h2 {
  cursor: pointer;
}
el-dialog {
  border-radius: 10px;
}
el-table {
  border: 1px solid #e4e7ed;
}
.el-table th,
.el-table td {
  text-align: center;
}
.dialog-footer {
  text-align: right;
}
</style>
